<template>
  <div class="carousel-container">
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <div class="carousel-item-container">
          <img :src="item.imgUrl" class="carousel-image" />
          <div class="image-info">
            {{ item.altText }}
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import photo1 from "@/assets/example/1.png";
import photo2 from "@/assets/example/2.png";
import photo3 from "@/assets/example/3.png";

interface CarouselItem {
  imgUrl: string;
  altText: string;
}

interface Props {
  carouselItems: CarouselItem[];
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
  carouselItems: () => [
    {
      imgUrl: photo1,
      altText: "【活动】城市绿化行动日",
    },
    {
      imgUrl: photo2,
      altText: "【活动】轮滑训练",
    },
    {
      imgUrl: photo3,
      altText: "【活动】数学思维训练营",
    },
  ],
});
</script>

<style scoped>
.carousel-container {
  /* 容器样式 */
  width: 100%;
  margin: 0 auto;
}

.carousel-item-container {
  position: relative;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: calc(100% - 50px); /* 减去描述区域的高度 */
  object-fit: cover;
}

.image-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  padding: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #333;
}

</style>
